<template>
	<div class="monitor-switch">
		<el-row type="flex" v-if="switchStatus == 0">
            <span class="run">ON</span>
            <span class="normal">OFF</span>
        </el-row>
        <el-row type="flex" v-else>
            <span class="normal">ON</span>
            <span class="error">OFF</span>
        </el-row>
    </div>
</template>

<script>

export default {
	name: 'MonitorSwitch',
	props: {
		switchStatus: {
			type: Number,
			default: 1
		}
	}
}
</script>

<style scoped lang="scss">
	@import '~scss_vars';
	.monitor-switch {
        height: 20px;
        width: 60px;
        background: white;
        .run {
            line-height: 20px;
            height: 20px;
            width: 30px;
            font-size: 10px;
            color: white;
            text-align: center;
            background: rgb(123, 189, 31);
        }
        .normal {
            line-height: 20px;
            height: 20px;
            width: 30px;
            font-size: 10px;
            color: white;
            text-align: center;
            background: rgb(164, 168, 164);
        }
        .error {
            line-height: 20px;
            height: 20px;
            width: 30px;
            font-size: 10px;
            color: white;
            text-align: center;
            background: rgb(197, 43, 43);
        }
    }
</style>